<template>
	<div id="sendPost">

		<h3>发表帖子页面</h3>

		<form method="post" id="send" @submit.prevent="sendPost">
			<div class="form-group divSize">

				<label for="postTitle">标题:</label>
				<input id="postTitle" type="text" v-model="post.postTitle" class="form-control" />

			</div>

			<div class="divHeight">
				<label for="postContent">内容:</label>
				<quill-editor v-model="post.postContent" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
				</quill-editor>
			</div>

			<input type="submit" value="发表" class="btn btn-primary"  />
		</form>
	</div>
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'

	export default {
		data() {
			return {
				post: {
					postTitle: '',
					postContent: '',
					postTime: '',
					postForumId: '',
					postUserId: ''
				},
				editorSetting: {
					height: 200
				},
				content: '',
				editorOption: {}
			}
		},
		created() {
			this.isLogin();
		},
		methods: {
			sendPost() {

				if(this.post.postTitle != '' && this.post.postContent != '') {
					this.post.postTime = this.dateTime();
					this.post.postForumId = this.$store.state.forumId;
					if(this.$store.state.user == null) {
						alert("请先登录！");
						this.$router.push({
							path: '/login'
						});
					}
					this.post.postUserId = this.$store.state.user[0].id;

					this.$http.post('/api/sendPost', this.post, {}).then(data => {
						if(data.status == 200) {
							alert("发表成功");
						} else {
							alert("发表失败");
						}
						this.postTitle = '';
						this.postContent = '';
					}, err => {
						console.log(err);
					})
				} else {
					alert("请输入相应内容");
				}
			},
			dateTime() {
				var dt = new Date();
				var y = dt.getFullYear();
				var m = (dt.getMonth() + 1).toString().padStart(2, "0");
				var d = (dt.getDate()).toString().padStart(2, "0");
				return `${y}-${m}-${d}`
			},
			isLogin() {
				if(this.$store.state.user == null) {
					alert("请先登录！");
					this.$router.push({
						name: 'login'
					});
				}
			},
			onEditorBlur(editor) { //失去焦点事件
			},
			onEditorFocus(editor) { //获得焦点事件
			},
			onEditorChange({
				editor,
				html,
				text
			}) {}
		}
	}
</script>

<style scoped>

	#sendPost{
		width: 700px;
		margin: 0 auto;
		-moz-animation-duration: s;
		-o-animation-duration: s;
		animation-duration: s;;;
	}
	.divHeight{
		height: 350px;
	}
	
	.quill-editor {
		height: 200px;
	}
</style>